

<template> 
   <div>
     <div class="title">独粒钻石</div>
     <div class="tip">(法国跳棋,跳过一个棋子,消灭被跳过的棋子)</div>
     <div class="infos">
          <div class="info">
               <div>单数步数</div>
               <div>{{ step1 }}</div>
          </div>
          <div class="info">
               <div>偶数步数</div>
               <div>{{ step2 }}</div>
          </div>
     </div>
     <div class="main">
           <div class="line" v-for="(i,index) in arr" :key="index">
             <div :class="each(index,jindex)" v-for="(j,jindex) in arr[index].length" :key="jindex">
              <div :class="eachInner(index,jindex)"  @click="play(index,jindex)">
                 +
              </div>
            </div>
           </div>  
     </div>
     <div class="reload" @click="reload()">
          重新开始
     </div>
   </div>
</template>
<script > 
// http://110.42.230.66/jewel/
var arr = [
  [0,0,1,1,1,0,0],
  [0,0,1,1,1,0,0],

  [1,1,1,1,1,1,1],
  [1,1,1,1,1,1,1],
  [1,1,1,1,1,1,1], 
  
  [0,0,1,1,1,0,0],
  [0,0,1,1,1,0,0],
]
 export default{
   data(){
       return{
         step:1, step1:0,step2:0,
         init:true,
         arr:arr,
         choose:true,
         put:false,
         cur:{},trag:{}
       }
   },
   methods:{
     each(index,jindex){
        if(index<2 && jindex<2)  return "each-emnpty"
        if(index<2 && jindex>4)  return "each-emnpty"

        if(jindex>4 && index>4 && index<7)  return "each-emnpty"
        if(jindex<2 && index>4 && index<7)  return "each-emnpty"

         return "each"
     },
     eachInner(index,jindex){
        if(!this.arr[index][jindex]) return  "none"
        if( this.cur.x == index && this.cur.y == jindex )   return "each-inner cur"
        return "each-inner"
     },
     play(index,jindex){
        
         if(this.init){
           this.init = false 
           this.step1 +=1;
           this.cur.x = index
           this.cur.y = jindex
           this.arr[index][jindex] = 0
           return
         } 

         if(this.choose){
           if(!this.arr[index][jindex]) return// 点击了空白 不响应
           this.cur.x = index
           this.cur.y = jindex
           this.choose = false;
           this.put = true;
           return
         }
         if(this.put){
           if(this.arr[index][jindex]) {
             this.cur.x = index
             this.cur.y = jindex
             return// 点击了存在的棋子 不响应
           }
           /*
            判断 cur 坐标和当前坐标间 有没有子
            从cur 出发 4 个方向  到达 index,jindex  中间只有1个 arr[x][y] = 1 才行
           */ 
           var cc = 0;
           var middle = {}
           if(this.cur.x == index){ // 同一竖
              var min = Math.min(this.cur.y,jindex)
              var max = Math.max(this.cur.y,jindex)   
              for(var i=min+1;i<max;i++){
                 cc += this.arr[index][i]
                 if(this.arr[index][i] == 1){
                   middle.x = index
                   middle.y = i
                 }
              }
           }else  if(this.cur.y==jindex){ // 同一横 视图上是竖着的
              var min = Math.min(this.cur.x,index)
              var max = Math.max(this.cur.x,index)   
              for(var i=min+1;i<max;i++){
                 cc += this.arr[i][jindex]
                 if(this.arr[i][jindex] == 1){
                   middle.x = i
                   middle.y = jindex
                 }
              }
           }else{
               return// 不在同一线上
           }
           if(cc==1){ // 还要知道是哪一个 这里用 middle 记录了
              this.arr[this.cur.x][this.cur.y] = 0 // 抹掉cur
              this.arr[middle.x][middle.y] = 0 // 抹掉中间元素
              this.arr[index][jindex] = 1 // 转移到目的地
              this.cur= {}  
              this.put = false;
              this.choose = true;
              this.step +=1;
              if(this.step%2){
                this.step1 +=1;
              }else{
                this.step2 +=1;
              }
           }else{
             return
           } 
         }
     },
     reload(){
       window.location.reload()
        
       this.arr = arr;
       this.init= true;
       this.step = this.step1 = this.step2 = 0 
     }
   },

 }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50; 
  max-width: 420px;
  position: relative; margin: auto;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.title{
  font-size: 16px;
  font-weight: 600;
  line-height: 40px;
}
.infos{
  display: flex;
  justify-content: space-between;
  padding: 0 100px;
}
.main{
  margin-top: 20px;
}
.line{ 
  margin: 0px;
  display: flex;
}
.each{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
}
.each-emnpty{ 
  width: 50px;
  height: 50px; 
  visibility: hidden;
  border: 1px solid #fff;
}
.each-inner{
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #2c3e50;
  color: #2c3e50;
  line-height: 30px;
}
.none{
  color:#FFF;
}
.cur{
  transform: scale(1.4);
  color:#FFF;
}
.reload{
  margin-top: 10px;
  border: 1px;
  color: #fff;
  background: #911e1e;
  width: 100px;
  border-radius: 20px;
  padding: 10px 20px;
  position: relative; margin: 20px auto  auto  auto ;
}
</style>
